JA, JONASIO 


All Web Design 
Rules and 
Guidelines 


Build Responsive Real-World 
Websites with HTML and CSS 


HTML CSS 


= @jonasschmedtman EJ 


All Design Ingredients 


01. Typography 

02. Colors 

03. Images and Illustrations 
04. Icons 

05. Shadows 

06. Border-radius 

07. Whitespace 

08. Visual Hierarchy 


09. User Experience 


10. Components and Layout 


All Website Personalities 


Design ingredients need to be applied in different ways to different website 


personalities. Different personalities have different traits, therefore choices for 


design ingredients need to be made accordingly. 


A detailed description of each personality can be found in the course slides, 


which are also available for download. Here is an overview: 


01. 


02. 


03. 


04. 


05. 


06. 


07. 


Serious/Elegant: For luxury and elegance, based on thin serif typefaces, 


golden or pastel colors, and big high-quality images. 


Minimalist/Simple: Focusses on the essential text content, using small or 


medium-sized sans-serif black text, lines, and few images and icons. 


Plain/Neutral: Design that gets out of the way by using neutral and small 


typefaces, and a very structured layout. Common in big corporations. 


Bold/Confident: Makes an impact, by featuring big and bold typography, 


paired with confident use of big and bright colored blocks. 


Calm/Peaceful: For products and services that care, transmitted by 
calming pastel colors, soft serif headings, and matching 


images/illustrations. 


Startup/Upbeat: Widely used in startups, featuring medium-sized sans- 


serif typefaces, light-grey text and backgrounds, and rounded elements. 


Playful/Fun: Colorful and round designs, fueled by creative elements like 


hand-drawn icons or illustrations, animations, and fun language. 


01 Typography 


01. Use only good and popular typefaces and play it safe 


02. It’s okay to use just one typeface per page! If you want more, limit to 2 


typefaces 
03. Choose the right typeface according to your website personality 


04. When choosing font-sizes, limit choices! Use a “type scale” tool or other 


pre-defined range 
05. Use a font size between 16px and 32px for “normal” text 
O06. For long text (like a blog post), try a size of 20px or even bigger 


07. For headlines, you can go really big (50px+) and bold (600+), depending 


on personality 
08. For any text, don’t use a font weight under 400 (regular) 
09. Use less than 75 characters per line 


10. For normal-sized text, use a line height between 1.5 and 2. For big text, go 


below 1.5 


11. Decrease letter spacing in headlines, if it looks unnatural (this will come 


from experience) 


12. Experiment with all caps for short titles. Make them small and bold and 


increase letter-spacing 
13. Usually, don’t justify text 


14. Don’t center long text blocks. Small blocks are fine 


02 Colors 


01. 


02. 


03. 


04. 


05. 


06. 


07. 


08. 


09. 


10. 


11. 


Make the main color match your website’s personality: colors convey 


meaning! 
Use a good color tone! Don’t choose a random tone or CSS named colors. 


You need at least two types of colors in your color palette: a main color 


and a grey color 


With more experience, you can add more colors: accent (secondary) 


colors (use a tool) 
For diversity, create lighter and darker “versions” (tints and shades) 


Use your main color to draw attention to the most important elements on 


the page 


Use colors to add interesting accents or make entire components or 


sections stand out 
You can try to use your color strategically in images and illustrations 


On dark colored backgrounds, try to use a tint of the background (“lighter 


version”) for text 


Text should usually not be completely black. Lighten if up it looks heavy 


and uninviting 


Don’t make text too light! Use a tool to check contrast between text and 


background colors 


03 Images and Illustrations 


01. Different types of images: product photos, storytelling photos, 


illustrations, patterns 


02. Use images to support your website’s message and story. So only use 


relevant images! 


03. Prefer original images. If not possible, use original-looking stock images 


(not generic ones!) 
04. Try to show real people to trigger user’s emotions 
05. If necessary, crop images to fit your message 
06. Experiment combining photos, illustrations and patterns 


07. Method #1: Darker or brighten image (completely or partially, using a 
gradient) 


08. Method #2: Position text into neutral image area 
09. Method #3: Put text in a box 


10. To account for high-res screens, make image dimensions 2x as big as 


their displayed size 
11. Compress images for a lower file size and better performance 


12. When using multiple images side-by-side, make sure they have the exact 


same dimensions 


O4 Icons 


01. 


02. 


03. 


04. 


05. 


06. 


07. 


08. 


09. 


10. 


11. 


Use a good icon pack, there are tons of free and paid icons packs 
Use only one icon pack. Don’t mix icons from different icon packs 


Use SVG icons or icon fonts. Don’t use bitmap image formats (.jog and 
Png)! 


Adjust to website personality! Roundness, weight and filled/outlined 


depend on typography 
Use icons to provide visual assistance to text 
Use icons for product feature blocks 


Use icons associated with actions, and label them (unless no space or 


icon is 100% clear) 
Use icons as bullet points 


To keep icons neutral, use same color as text. To draw more attention, 


use different color 


Don’t confuse your users: icons need to make sense and fit the text or 


action! 


Don't make icons larger than what they were designed for. If needed, 


enclose them in a shape 


05 Shadows 


01. 


02. 


03. 


04. 


05. 


06. 


07. 


08. 


You don’t have to use shadows! Only use them if it makes sense for the 


website personality 
Use shadows in small doses: don’t add shadows to every element! 
Go light on shadows, don’t make them too dark! 


Use small shadows for smaller elements that should stand out (to draw 


attention) 


Use medium-sized shadows for larger areas that should stand out a bit 


more 


Use large shadows for elements that should really float above the 


interface 
Experiment with changing shadows on mouse interaction (click and hover) 


Bonus: Experiment with glows (colored shadows) 


O6 Border-radius 


01. 


02. 


03. 


Use border-radius to increase the playfulness and fun of the design, to 


make it less serious 


Typefaces have a certain roundness: make sure that border-radius 


matches that roundness! 


Use border-radius on buttons, images, around icons, standout sections 


and other elements 


07 Whitespace 


01. 


02. 


03. 


04. 


05. 


06. 


07. 


08. 


Use tons of whitespace between sections 

Use a lot of whitespace between groups of elements 

Use whitespace between elements 

Inside groups of elements, try to use whitespace instead of lines 


The more some elements (or groups of elements) belong together, the 


closer they should be! 


Start with a lot of whitespace, maybe even too much! Then remove 


whitespace from there 


Match other design choices. If you have big text or big icons, you need 


more whitespace 


Try a hard rule, such as using multiples of 16px for all spacing 


08 Visual Hierarchy 


01. 


02. 


03. 


04. 


05. 


06. 


07. 


08. 


Position important elements closer to the top the page, where they get 


more attention 


Use images mindfully, as they draw a lot of attention (larger images get 


more attention) 


Whitespace creates separation, so use whitespace strategically to 


emphasize elements 


For text elements, use font size, font weight, color, and whitespace to 


convey importance 


What text elements to emphasize? Titles, sub-titles, links, buttons, data 


points, icons 


Emphasize an important component using background color, shadow, or 


border (or multiple) 


Try emphasizing some component A over component B by de- 


emphasizing component B 


What components to emphasize? Testimonials, call-to-action sections, 


highlight sections, preview cards, forms, pricing tables, important 


rows/columns in tables, etc. 


O9 User Experience (UX) 


01. 


02. 


03. 


04. 


05. 


06. 


07. 


08. 


09. 


10. 


11. 


Don’t design complicated layouts. Don’t reinvent the wheel. Use patterns 


that users know 


Make your call-to-action the most prominent element, and make the text 


descriptive 
Use blue text and underlined text only for links! 


Animations should have a purpose and be fast: between 200 and 500 


milliseconds 


In forms, align labels and fields in a single vertical line, to make the form 


easier to scan 


Offer users good feedback for all actions: form errors, form success, etc. 


[web apps] 


Place action buttons where they will create an effect (law of locality) [web 
apps] 


Use a descriptive, keyword-focused headline on your main page. Don’t be 


vague or fancy! 


Only include relevant information, efficiently! Cut out fluff and make the 


content 100% clear 
Use simple words! Avoid technical jargon and “smart-sounding” words 


Break up long text with sub-headings, images, block quotes, bullet points, 


etc. 


10 Elements and Components 


01. Use common elements and components to convey your website’s 


information 


02. Combine components into layouts using common layout patterns 


03. Assemble different layout areas into a complete, final page 


